<template>
  <div class="tabChange page-container mini-padding">
    <h1>自定义tab点击切换指令</h1>
    <div class="tabContainer" v-tab="{
      className: 'tab', activeName: 'purple-bg', currentIndex, click: (index: any) => {
        currentIndex = index
      }
    }">
      <div class="tab flex-row-center primary-bg mini-margin">tab1</div>
      <div class="tab flex-row-center primary-bg mini-margin">tab1</div>
      <div class="tab flex-row-center primary-bg mini-margin">tab1</div>
    </div>
    <h2>使用说明</h2>
    <h2>指令文件 src/directive/tavChange.ts</h2>
    <h2>使用示例</h2>
    <pre style="font-size: 16px;">
  已经全局注册无需引入，直接将所需要拖拽的标签上加上 v-tab指令 即可  
   &lt;div class="tabContainer" 
    v-tab="{
      className: 'tab', activeName: 'purple-bg', currentIndex, click: (index: any) => {
        currentIndex = index
      }
    }"&gt;
    &lt;div class="tab flex-row-center primary-bg mini-margin"&gt;tab1&lt;/div&gt;
    &lt;div class="tab flex-row-center primary-bg mini-margin"&gt;tab1&lt;/div&gt;
    &lt;div class="tab flex-row-center primary-bg mini-margin"&gt;tab1&lt;/div&gt;
  &lt;/div&gt;
    </pre>

  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';

let currentIndex = ref(0)
</script>

<style scoped lang='scss'>
.tab {
  width: 80px;
  height: 30px;
}
</style>